import React, { memo, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { useParams } from 'react-router-dom'

import { AlbumDetailWrapper, LeftWrapper, RightWrapper } from './style'
import AlbumComment from '../album-comment'
import AlbumInfo from '../album-info'
import AlbumSong from '../album-song'
import {
  getAlbumDetailAction,
  getAlbumCommentsAction
} from '../../store/actionCreators'

export default memo(function AlbumDetail() {
  const { id } = useParams()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getAlbumDetailAction(id))
    dispatch(getAlbumCommentsAction(id,0))
  },[dispatch,id])
  return (
    <AlbumDetailWrapper className="wrap-v2">
      <LeftWrapper>
        <AlbumInfo />
        <AlbumSong />
        <AlbumComment/>
      </LeftWrapper>
      <RightWrapper>RIGHT</RightWrapper>
    </AlbumDetailWrapper>
  )
})
